<template>
  <tooltip :placement="place" mode="click" :invisible="invisible" style="display: inline-block" ref="tooltip">
    <div slot="outlet" @click.stop="click()">
      <i class="iconfont icon-ic_yiwen prompt-gray"></i>
    </div>
    <div slot="tooltip">
      {{msg}}
    </div>
  </tooltip>
</template>
<script>
  /**
   * @module common/plugins/tooltip
   * @author lxr
   * @description 提示信息
   * @param  {String} place - 提示信息位置
   *         {String} msg -提示的具体内容
   * @example <dc-tooltip  :place="top-left" :msg="'提示内容'"></dc-tooltip>
   * * @example <dc-tooltip  :place="bottom-left" :msg="'提示内容'"></dc-tooltip>
   */

  import Vue from 'vue';
  import Tooltip from 'hsy-vue-tooltip';
  export default {
    /**
     * @property {String}  place     - 提示信息显示位置.
     * @property {String}  msg    - 提示内容.
     */
    props: {
      place: String,
      msg: String
    },
    created () {
      Vue.use(Tooltip);
    },
    data () {
      return {
        invisible: false
      };
    },
    methods: {
      click () {
        event.preventDefault(); //阻止时间冒泡
        this.$refs.tooltip.autoShowWithMode(event);
      }
    }
  };
</script>
<style lang="scss" scoped>
  .prompt-gray {
    color: #7C7B97 !important;
  }
</style>
